<template>
  <div :class="`tree-node level-${level}`">
    <div class="node-content" @click="handleNodeClick">
      <div class="node-info">
        <span class="tree-label">{{ props.getName(node.path) }}</span>
        <div class="node-stats">
          <span class="stat-item">任务数: {{ node.totalBadges || 0 }}</span>
          <span class="stat-item">平均等级: {{ node.avgLevel !== undefined && node.avgLevel !== -1 ? node.avgLevel.toFixed(1) : '-' }}</span>
          <span class="stat-item">最高等级: {{ node.maxLevel ?? '-' }}</span>
        </div>
      </div>
      <span
        class="tree-toggle"
        v-if="hasChildren"
      >{{ expanded ? '▼' : '▶' }}</span>
    </div>
    <div v-if="hasChildren && expanded" class="tree-children">
      <SkillTreeNode
        v-for="(child, key) in node.subNodes"
        :key="`${key}-${level}`"
        :node="child"
        :level="level + 1"
        :getName="props.getName"
        :uid="props.uid"
      />
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import SkillTreeNode from './SkillTreeNode.vue'

const props = defineProps({ node: Object, level: Number, getName: Function, uid: String })

const hasChildren = computed(() => props.node.subNodes && Object.keys(props.node.subNodes).length > 0)
const expanded = ref(props.level === 1) // 默认展开第一级

function toggle() {
  expanded.value = !expanded.value
}

// 处理节点点击事件
function handleNodeClick() {
  // 如果是三级节点（6位编码），跳转到association页面
  if (props.node.path && props.node.path.length === 6) {
    // 使用从父组件传递的uid，与badges页面保持一致
    const uid = props.uid || uni.getStorageSync('routeUid') || uni.getStorageSync('uid') || ''
    if (!uid) {
      uni.showToast({ title: '请先登录', icon: 'none' })
      return
    }
    
    console.log('技能树三级节点点击:', {
      nodePath: props.node.path,
      uid: uid,
      jumpUrl: `/pages/skill-tree/association/index?contributorId=${uid}&badges=${props.node.path}`
    })
    
    // 跳转到association页面
    uni.navigateTo({
      url: `/pages/skill-tree/association/index?contributorId=${uid}&badges=${props.node.path}`,
      fail: (err) => {
        console.error('跳转到关联详情页面失败:', err)
        uni.showToast({ title: '页面跳转失败', icon: 'none' })
      }
    })
  } else {
    // 其他级别节点，执行展开/收起操作
    toggle()
  }
}
</script>

<style scoped>
.tree-node {
  margin: 10px 0;
  border-radius: 8px;
  transition: background-color 0.2s;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.node-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
}

.node-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tree-label {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.node-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-item {
  color: #aef;
  font-size: 12px;
  font-weight: 400;
}

.tree-toggle {
  color: #6cf;
  font-size: 18px;
  cursor: pointer;
  margin-left: 12px;
  user-select: none;
  font-weight: bold;
}

.tree-children {
  margin-left: 20px;
  border-left: 1px solid rgba(108, 255, 255, 0.3);
  padding-left: 16px;
}

.tree-node:hover {
  background: rgba(255, 255, 255, 0.15);
}

.tree-node:hover .node-stats .stat-item {
  color: #cff;
}
</style>